<template>
  <view class="transferSubmission">
    <topTitle title="转账" />
    <view class="com">
      <view class="ipts">
        <view>
          <view>转账金额（最低：${{ bankPaymentObj.price_min }}）</view>
          <view>
            <up-input
              placeholder="請輸入轉帳金额"
              border="surround"
              v-model="amount"
            >
              <template #prefix> <text>$ </text></template>
            </up-input>
          </view>
        </view>
        <view>
          <view>本人姓名</view>
          <view>
            <up-input
              placeholder="請輸入本人真实姓名"
              border="surround"
              v-model="full_name"
            >
            </up-input>
          </view>
        </view>
      </view>
      <view class="qr_code" v-if="!bankPaymentObj.qr_code">
        <view>收款账户二维码（{{ bankPaymentObj.bank_name }}）</view>
        <view><image :src="bankPaymentObj.qr_code" mode="scaleToFill" /></view>
      </view>
      <view class="card_number" v-else>
        <view>收款账户</view>
        <view>
          <view>{{ bankPaymentObj.bank_name }}</view>
          <view>
            <view>收款人</view>
            <view>{{ bankPaymentObj.account_holder }}</view>
          </view>
          <view>{{ bankPaymentObj.card_number }}</view>
        </view>
      </view>
      <view class="tips">
        <view>线下银行转账提示：</view>
        <view>1、输入的转账金额需与线下实际银行转账金额一致</view>
        <view>2、提交转账信息后需等待审核，审核中请勿反复提交</view>
        <view>3、每15分钟可提交一次</view>
      </view>
      <up-button
        :disabled="!(amount && full_name)"
        text="确认提交"
        @tap="bankPaymentPlaceOrderFn"
        type="primary"
      ></up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { BankPaymentPlaceOrder } from "@/api/UserApi";
const instance = getCurrentInstance()?.appContext.config.globalProperties;

let bankPaymentObj = ref<any>();
onLoad((option: any) => {
  const query = decodeURIComponent(option.bankPaymentObj);
  if (query) {
    bankPaymentObj.value = JSON.parse(query);
    console.log(bankPaymentObj.value);
  }
});

let amount = ref<number | string>();
let full_name = ref<string>();

const bankPaymentPlaceOrderFn = async () => {
  if (bankPaymentObj.value.price_min > Number(amount.value || 0)) {
    uni.showToast({
      title: "最低充值$" + bankPaymentObj.value.price_min,
      icon: "none",
    });
    return;
  }
  await BankPaymentPlaceOrder({
    payment_id: bankPaymentObj.value.payment_id,
    amount: amount.value,
    full_name: full_name.value,
    loading: 1,
  });
  instance?.goRedirectTo("/pages/myWallet/submitSuccessfully?type=1");
};
</script>
<style scoped lang="scss">
@import "../../static/scss/myWallet.scss";
</style>
